<template>
  <div class="box">
    <div class="top">
        <span>💜</span>
        <p>文案库</p>
        <h1>···</h1>
      </div>
    <div style="margin-top:.4rem;" class="left" v-for="(v,i) in arr" :key="i">
      <button @click="funa('aidou')" :class="{changeSelectAll: isshowa}">爱豆</button>
      <button @click="funb('study')" :class="{changeSelectAll: isshowb}">学习</button>
      <button @click="func('wenrou')" :class="{changeSelectAll: isshowc}">温柔仙气</button>
      <button @click="fund('aoye')" :class="{changeSelectAll: isshowd}">熬夜失眠</button>
      <button @click="fune('aidou')" :class="{changeSelectAll: isshowe}">爱豆</button>
      <button @click="funf('study')" :class="{changeSelectAll: isshowf}">学习</button>
      <button @click="fung('wenrou')" :class="{changeSelectAll: isshowg}">温柔仙气</button>
      <button @click="com='aoye'">熬夜失眠</button>
      <button @click="com='aidou'">爱豆</button>
      <button @click="com='study'">学习</button>
      <button @click="com='wenrou'">温柔仙气</button>
      <button @click="com='aoye'">熬夜失眠</button>
      <button @click="com='wenrou'">温柔仙气</button>
      <button @click="com='aoye'">熬夜失眠</button>
      </div>
    <component :is="com" class="content"></component>
    <Foot/>
  </div>
</template>

<script>
import aidou from "@/components/aidou.vue";
import study from "@/components/study.vue";
import wenrou from "@/components/wenrou.vue";
import aoye from "@/components/aoye.vue";
import Foot from "@/components/foot.vue";
import click from "@/mixins/click.js"
export default {
  mixins:[click],
  data() {
    return {
      com: "aidou",
      isshowa: true,
      isshowb: false,
      isshowc: false,
      isshowd: false,
      isshowe: false,
      isshowf: false,
      isshowg: false,
      
      arr:[
         {"com":"aidou","name":"爱豆"},
         {"com":"study","name":"学习"},
         {"com":"wenrou","name":"温柔仙气"},
         {"com":"aoye","name":"熬夜失眠"}
    
      ]
    };
  },
  methods: {
  fun(){
    this.$router.push("./index")
  },
  
     
  },
  
  components: {
    aidou,
    study,
    wenrou,
    aoye,
    Foot
  },

}
</script>

<style scoped>

.top{
  display: flex;
  height: .4rem;
  width: 100%;
  background-color: white;
  line-height: .4rem;
  position: relative;
  border-bottom: .005rem solid gray;
  position: fixed;
top: 0;
left: 0;
z-index: 999;

}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}
button {
  display: block;
  border: none;
  width: 1rem;
  height: 0.4rem;
  background-color: #fff;
}
.box {
  display: flex;
  background-color: #f5f5f5;
}
.content {
  
  margin-left: 1.1rem;
  box-sizing: border-box;
  width: 3rem;
  font-size: .15rem;
  text-align: center;
  margin-top: .4rem;
  margin-bottom: 1rem;
}


.changeSelectAll{
    border-right: .08rem solid #ff595b;
    color: #ff595b;
}
.left{
  position: fixed;
  left: 0;
}
</style>